<template>
	<div class="Register">
		<form id="registee_from">
			<div class="Register_box">
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">账号</div>
						<input type="text" name="username" v-model="username" class="form-control" id="exampleInputAmount_name" placeholder="请输入账号">
					</div>
				</div>
				<div class="form-group">
					<div class="input-group">
						<div class="input-group-addon">密码</div>
						<input type="password" name="password" v-model="password" class="form-control" id="exampleInputAmount_password" placeholder="请输入账号">
					</div>
				</div>
				<div id="phone_number_box" class="input-group form-group has-feedback">
					<div class="input-group-addon">手机号</div>
					<input type="text" name="phone_number" v-model="phone_number" class="form-control" id="exampleInputAmount_num" @blur.prevent="changePhone()" placeholder="请输入手机号">
					<span id="phone_number_span" class="glyphicon form-control-feedback" aria-hidden="true"></span>
				</div>
				<div id="email_box" class="input-group form-group has-feedback">
					<div class="input-group-addon">邮箱</div>
					<input type="email" name="email" v-model="email" class="form-control" id="exampleInputEmail2" @blur.prevent="changeEmail()" placeholder="请输入邮箱地址">
					<span id="email_span" class="glyphicon form-control-feedback" aria-hidden="true"></span>
				</div>
				<div class="form-group">
					<div class="input-group radio_box">
						<label class="radio-inline">
						  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="管理员" disabled> 管理员
						</label>
						<label class="radio-inline">
						  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="普通用户" checked> 普通用户
						</label>
					</div>
				</div>
				<div class="login_hrefbox"><p>已经注册有账号了，<a @click="login_hrefClick()" class="login_href" href="javascript:;">立即登录</a></p></div>
				<div class="register_but_box">
					<button type="button" @click="registerClick()" class="btn btn-primary register_but">立即注册</button>
				</div>
			</div>
		</form>
		<div class="merk" v-if="bel" @click="clese">
			<div class="bex" @click.stop="">
				<h1 class="glyphicon glyphicon-remove"></h1>
				<p class="merk_tip">{{merk_tip}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	
	export default {
		name: 'Register',
		data() {
			return {
				register_bodyBgImage: 'url(' + require('../../assets/img/login_background/register.jpg') + ')',
				username: '',
				password: '',
				phone_number: '',
				email: '',
				identity: '普通用户',
				bel: false
			}
		},
		methods: {
			
			// 模态框关闭事件
			clese(){
				this.bol = !this.bol;
			},
			
			// 添加body图片
			setBodyBackGround() {
				document.body.style.backgroundSize = 'cover'
				document.body.style.width = '100%'
				document.body.style.height = '100%'
				document.body.style.backgroundImage = this.register_bodyBgImage
			},
			
			// 清除背景图
			clearBodyBackGround() {
				document.body.style.backgroundImage = ''
			},
			
			// 注册按钮点击事件
			registerClick(){
				this.axios.get('http://192.168.43.169/userlibrary/register',{
					params: {
						username: this.username,
						password: this.password,
						phone_number: this.phone_number,
						email: this.email,
						identity: this.identity ,
						Noaudit_original: 0,
						original_book: 0
					},
				}).then((response) => {
					let res_data = response.data;
					if(res_data.error_code == 100){
						console.log(res_data.error)
						let _self = this
						_self.bel = !_self.bel
						_self.merk_tip = res_data.error
						// 设置一定时间后关闭提醒框
						setTimeout(function() {
							_self.bel = !_self.bel
						}, 2000);
					}else {
						this.$router.push('/login')
					}
				});
			},
		
		    // 手机号正则判断函数
			checkPhone(str){
				let reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
				return reg.test(str);
			},
			
			//邮箱地址正则判断函数
			checkEmail(str){
				let reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
				return reg.test(str);
			},
		
			// 手机号输入框失去焦点事件
			changePhone(){
				let check_code = this.checkPhone(this.phone_number);
				if(!check_code){
					this.phone_number = '';
					$('#phone_number_box').addClass('has-error').removeClass('has-success');
					$('#phone_number_span').addClass('glyphicon-remove').removeClass('glyphicon-ok');
				}else{
					$('#phone_number_box').addClass('has-success').removeClass('has-error');
					$('#phone_number_span').addClass('glyphicon-ok').removeClass('glyphicon-remove');
				}
			},
			
			// 邮箱地址输入框失去焦点事件
			changeEmail(){
				let check_code = this.checkEmail(this.email);
				if(!check_code){
					this.email = '';
					$('#email_box').addClass('has-error').removeClass('has-success');
					$('#email_span').addClass('glyphicon-remove').removeClass('glyphicon-ok');
				}else{
					$('#email_box').addClass('has-success').removeClass('has-error');
					$('#email_span').addClass('glyphicon-ok').removeClass('glyphicon-remove');
				}
			},
			
			// 跳转回登录页面
			login_hrefClick(){
				this.$router.push('/login')
			}
		},
		mounted() {
			// 进来的时候调用添加
			this.setBodyBackGround(),
			
			$('#myModal').on('shown.bs.modal', function () {
			  $('#myInput').focus()
			})
		},
		beforeDestroy() {
			// 离开页面的时候清除
			this.clearBodyBackGround()
		}
	}
</script>

<style>
	@import '~assets/css/Register.css';
	@import '~assets/css/mask.css';
</style>
